<template>
  <div class="index">
    <!-- 频道列表 -->
    <van-tabs v-model="curIndex">
      <van-tab
      v-for="channel in channels"
      :title="channel.name"
      :key="channel.id">
      <!-- 频道 与 文章列表是一一对应的，每个频道都需要一个文章列表组件 -->
      <!-- van-tab 具有类似于懒加载的效果：只有激活了当前的tab,才会去创建文章列表组件 -->

      <!-- 把当前的频道信息传给子组件 -->
      <!-- 文章列表 -->
      <article-list :channel="channel" @showMoreAction="hShowMoreAction"></article-list>
      </van-tab>
   </van-tabs>
   <!-- 频道列表 开关 通过定位  getters.isLogin 在store文件中的计算属性-->
    <div v-if="$store.getters.isLogin" class="bar-btn" @click="showChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>
   <!-- 文章--更多操作 -->
    <van-popup v-model="showMoreAction" round :style="{ width: '80%' }">
      <!-- @dislike 事件是子组件 moreAction中触发的 -->
      <!-- @report="hReport":处理举报的信息 -->
      <more-action
      @report="hReport"
      @dislike="hDislike"
      ref="refMoreAction"></more-action>
    </van-popup>

    <!-- ActionSheet 动作面板（自定义面板） -->
     <van-action-sheet v-model="showChannelEdit" title="标题">
       <!--
          频道管理的弹层
          1. 把当前的订阅频道传入 子组件channelEdit
          2. 把当前选中的频道（激活的）下标传给子组件
          3. :curIndex="curIndex" 把当前频道下标传入
        -->
       <channel-edit
       :channels="channels"
       :curIndex="curIndex"
        @fixedIndex='hFixedIndex'
       @updateCurChannel="hUpdateCurChannel"
       ></channel-edit>
    </van-action-sheet>
  </div>
</template>

<script>
import { getChannels } from '@/api/channel.js'
import { dislikeArticle, reportArticle } from '@/api/article.js'
import ArticleList from './articleList.vue'
import MoreAction from './moreAction.vue'
import ChannelEdit from './channelEdit.vue'
export default {
  name: 'Home',
  data () {
    return {
      channels: [], // 当前订阅的频道
      curIndex: 0, // 表示当前选中频道的索引值
      // channelId: '', // 表示当前选中频道的编号
      articleId: null, // 本次要操作的文章编号
      showChannelEdit: false, // 默认不显示频道编辑弹层
      showMoreAction: false // 是否显示更多操作的弹层
    }
  },
  components: {
    ArticleList,
    MoreAction,
    ChannelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hFixedIndex (idx) {
      this.curIndex = idx
    },
    // 处理子组件 channelEdit 中用户在我的频道上的点击事件
    hUpdateCurChannel (idx) {
      // 1.关闭 我的频道 弹层
      this.showChannelEdit = false
      // 2.切换频道列表到 当前频道上
      this.curIndex = idx
    },
    delArticle () {
      // (3) 通知文章列表去删除被点击的文章
      const obj = {
        articleId: this.articleId,
        channelId: this.channels[this.curIndex].id // 当前频道的id
      }
      this.$eventBus.$emit('delArticle', obj)
    },
    async hReport (reportTypeId) {
      // (1) 调用后端接口
      const result = await reportArticle(this.articleId, reportTypeId)
      console.log(result)
      // (2) 退出弹层
      this.showMoreAction = false
      // (3) 通知文章列表去删除被点击的文章
      this.delArticle()
    },
    async hDislike () {
      console.log('从子组件收到，不感兴趣！要操作的文章编号是', this.articleId)
      try {
        // (1) 调用后端接口
        const result = await dislikeArticle(this.articleId)
        console.log(result)
        // (2) 退出弹层
        this.showMoreAction = false
        // (3) 通知文章列表去删除被点击的文章
        this.delArticle()
        this.$toast.success('操作成功')
      } catch (e) {
        this.$toast.fail('操作失败')
      }
    },
    async loadChannels () {
      const result = await getChannels()
      // console.log(result)
      this.channels = result.data.data.channels
    },
    // 处理子组件 articleList 中抛出的 关闭按钮
    hShowMoreAction (articleId) {
      // console.log('收到从子组件中传递的文章编号', articleId)
      // 保存文章编号
      this.articleId = articleId
      // 显示弹层
      this.showMoreAction = true

      // 确保 moreAction 组件中的 isReport 为false
      /*
          本质：在父组件 中去修改子组件中的数据项
          思路：在父组件中 获取子组件的引用，并直接去修改子组件中的数据
       */
      if (this.$refs.refMoreAction) {
        // 第一次没有创建
        this.$refs.refMoreAction.isReport = false
        // this.$refs.refMoreAction.abc()
      }
    }
  }
}
</script>

<style scoped lang="less">
// 频道管理的开关按钮
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
